<template>
    <el-container>
        <el-main class="wrapper">
            <section class="panel cms-content">
                <div style="width: 350px">
                    <el-input  size="medium" v-model="name" clearable placeholder="请输入标签名称">
                        <el-button class="tag-button-sub" type="primary" @click="update()" slot="append"> 提交</el-button>
                    </el-input>
                </div>
                <div class="panel-body">
                    <el-tag
                            :key="tag.id"
                            v-for="tag in listData"
                            closable
                            :disable-transitions="false"
                            @close="destory(tag.id)">
                        {{tag.name}}
                    </el-tag>
                </div>
            </section>
        </el-main>
    </el-container>
</template>

<script>
    import {mapGetters} from 'vuex';
    import {TagList,TagUpdate,TagDestroy} from '@/utils/request';
    export default {
        data() {
            return {
                listData: [],//列表数据
                name: ''
            }
        },
        activated(){
            this.list();
        },
        computed: {
            ...mapGetters(['loading']),
        },
        methods: {
            update() {
                if (this.name) {
                    var that = this;
                    this.$nextTick(_ => {
                        TagUpdate({name:that.name}).then((res)=>{
                            if(res.code){
                                this.$message.error(res.msg);
                            }else{
                                this.$message({
                                    type: 'success',
                                    duration: '500',
                                    message: res.msg,
                                    onClose:() =>{
                                        that.list();
                                    }
                                });
                            }
                        })
                    });
                }else{
                    this.$message.error('请填写标签名称');
                }
            },
            //列表
            list(){
                this.$store.dispatch('setLoading', true);
                TagList({params: this.params}).then((res)=>{
                    if (res.code) {
                        this.$message.error(res.msg);
                    } else {
                        this.listData = res.data;
                    }
                    this.$store.dispatch('setLoading', false);
                })
            },
            //删除
            destory(id){
                this.$confirm('确定要删除该标签信息吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    TagDestroy({id: id}).then((res) => {
                        if (res.code) {
                            this.$message.error(res.msg);
                        } else {
                            this.list();
                        }
                    });
                }).catch(() => {});
            },
        }
    }
</script>
<style>
    .el-tag + .el-tag {
        margin-left: 10px;margin-top: 15px;
    }
    .button-new-tag {
        margin-left: 10px;
        height: 32px;
        line-height: 30px;
        padding-top: 0;
        padding-bottom: 0;
    }
    .input-new-tag {
        width: 90px;
        margin-left: 10px;
        vertical-align: bottom;
    }
</style>
